<template>
	<div class="container">
		<van-nav-bar fixed left-arrow @click-left="$router.back()" title="小思同学"></van-nav-bar>
		<div class="chat-list">
			<div v-for="(item, index) in list" :key="index">
				<!-- 左侧是机器人小思 -->
				<div class="chat-item left" v-if="item.name === 'xs'">
					<van-image fit="cover" round src="https://img.yzcdn.cn/vant/cat.jpeg" />
					<div class="chat-pao">{{item.msg}}</div>
				</div>

				<!-- 右侧是当前用户 -->
				<div class="chat-item right" v-else>
					<div class="chat-pao">{{item.msg}}</div>
					<van-image fit="cover" round :src="$store.state.userPhoto" />
				</div>
			</div>
		</div>
		<div class="reply-container van-hairline--top">
			<van-field v-model="word" placeholder="说点什么...">
				<span @click="send()" slot="button" style="font-size:12px;color:#999">提交</span>
			</van-field>
		</div>
	</div>

</template>

<script>
	import {
		io
	} from 'socket.io-client'

	export default {
		data() {
			return {
				word: '',
				socket: null,
				list: []
			}
		},

		created() {
			this.socket = io('ws://www.liulongbin.top:9999')
			this.socket.on('message', msg => {
				this.list.push({
					name: 'xs',
					msg
				})
			})
		},

		methods: {
			send() {
				if (!this.word) return

				this.socket.emit('send', this.word)
				this.list.push({
					name: 'me',
					msg: this.word
				})
				this.word = ''
			},

			scrollToBottom() {
				const chatItem = document.querySelectorAll('.chat-item')
				const lastItem = chatItem[chatItem.length - 1]

				lastItem.scrollIntoView({
					behavior: 'smooth',
					block: 'end'
				})
			}
		},

		watch: {
			list() {
				this.$nextTick(() => {
					this.scrollToBottom()
				})
			}
		},

		beforeDestroy() {
			this.socket.close()
			this.socket = null
		}
	}
</script>

<style lang="less" scoped>
	.container {
		height: 100%;
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		box-sizing: border-box;
		background: #fafafa;
		padding: 92px 0 100px 0;

		.chat-list {
			height: 100%;
			overflow-y: scroll;

			.chat-item {
				padding: 20px;

				.van-image {
					vertical-align: top;
					width: 80px;
					height: 80px;
				}

				.chat-pao {
					vertical-align: top;
					display: inline-block;
					min-width: 80px;
					max-width: 70%;
					min-height: 80px;
					line-height: 76px;
					border: 0.5px solid #c2d9ea;
					border-radius: 8px;
					position: relative;
					padding: 0 20px;
					background-color: #e0effb;
					word-break: break-all;
					font-size: 28px;
					color: #333;

					&::before {
						content: "";
						width: 20px;
						height: 20px;
						position: absolute;
						top: 24px;
						border-top: 0.5px solid #c2d9ea;
						border-right: 0.5px solid #c2d9ea;
						background: #e0effb;
					}
				}
			}
		}
	}

	.chat-item.right {
		text-align: right;

		.chat-pao {
			margin-left: 0;
			margin-right: 30px;

			&::before {
				right: -12px;
				transform: rotate(45deg);
			}
		}
	}

	.chat-item.left {
		text-align: left;

		.chat-pao {
			margin-left: 30px;
			margin-right: 0;

			&::before {
				left: -10px;
				transform: rotate(-135deg);
			}
		}
	}

	.reply-container {
		position: fixed;
		left: 0;
		bottom: 0;
		height: 88px;
		width: 100%;
		background: #f5f5f5;
		z-index: 9999;
	}
</style>
